<template>
  <div class="fl-hover-panel" :class="{ show: visible }">
    <div class="d-flex justify-content-between align-items-center">
      <div class="font-weight-bold">{{ selectedNode.label }}</div>
      <el-button type="text" icon="el-icon-close" @click="handleCloseHoverPanel"></el-button>
    </div>
    <div class="mb-2">
      <dl-list label="状态" :value="selectedStatusLabel"></dl-list>
    </div>
    <div class="fl-hover-record">
      <div v-for="(r, index) in selectedRecord" :key="index" class="fl-hover-item">
        <dl-list label="人员" :value="r.approval_person"></dl-list>
        <dl-list label="意见" v-if="r.approval_option" use-xss :value="r.approval_option"></dl-list>
        <dl-list label="时间" v-if="r.approval_time" :value="r.approval_time"></dl-list>
      </div>
    </div>
  </div>
</template>

<script>
import xss from 'xss'

export default {
  components: {
    'dl-list': {
      functional: true,
      props: {
        label: String,
        value: String,
        useXss: Boolean,
      },
      render: (h, ctx) =>
        h('div', { class: 'd-flex' }, [
          h('div', { class: 'text-muted' }, (ctx.props.label || '') + '：'),
          ctx.props.useXss
            ? h('div', { class: 'flex-1', domProps: { innerHTML: xss(ctx.props.value) } })
            : h('div', { class: 'flex-1' }, ctx.props.value),
        ]),
    },
  },
  props: {
    visible: Boolean,
    selectedNode: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {}
  },
  computed: {
    selectedRecord() {
      return this.selectedNode.record || []
    },
    selectedStatusLabel() {
      const { editable, status, is_one_approval: isOne } = this.selectedNode
      const isOneApproval = isOne === 1
      return {
        '0-0': this.selectedRecord.length ? '待审批' : '未到达',
        '0-1': '待审批',
        '1-0': '已审批',
        '1-1': isOneApproval ? '待审批（被退回）' : '审批中',
      }[`${status === 0 ? 0 : 1}-${editable ? 1 : 0}`]
    },
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    handleCloseHoverPanel() {
      this.$emit('update:visible', false)
    },
  },
}
</script>

<style lang="scss" scoped>
.fl-hover-panel {
  position: absolute;
  bottom: -100%;
  left: 10%;
  width: 80%;
  padding: 1rem;
  background-color: #fff;
  border: 1px solid #eee;
  border-radius: 0.25rem;
  box-shadow: 2px 2px 4px rgba(128, 128, 128, 0.2);
  transition: all 0.3s;

  &.show {
    bottom: 10px;
  }
}

.fl-hover-record {
  min-height: 30px;
  max-height: 150px;
  overflow-y: auto;
  padding: 0.5rem;
  background-color: #f6f6f6;
  border-radius: $border-radius-lg;

  @include scrollbar-theme();
}

.fl-hover-item {
  border-bottom: 1px dotted $border-color;
  &:last-child {
    border-bottom: none;
  }
}
</style>
